<template>
    <div>
        <div class="padding">列表</div>
        <div class="margin-top">
            <div class="f18">验证表单 - 通过设置form的宽度，来限制整个表单的宽度</div>
            <el-form :model="editForm" :rules="rules" ref="editForm" label-width="100px" style="width: 500px">
                <el-form-item label="类型" prop="owner_type_id">
                    <el-select v-model="editForm.owner_type_id" placeholder="请选择类型">
                      <el-option v-for="item in typelist" :key="item.id" :label="item.name" :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="地区" prop="regional_id">
                    <el-select v-model="editForm.regional_id" placeholder="请选择地区">
                      <el-option v-for="item in regionallist" :key="item.id" :label="item.name" :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="年份" prop="year">
                    <el-select v-model="editForm.year" placeholder="请选择年份">
                        <el-option
                            v-for="item in yearlist" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="数量" prop="quantity">
                    <el-input v-model="editForm.quantity" type="number"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm('editForm')">更新</el-button>
                    <el-button @click="resetForm('editForm')">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
export default {
    name: "TypeEdit",
    data() {
        return {
            id:this.$route.params.id,
            data: {},
            typeid:'',
            regionalid:'',
            typelist: [],
            yearlist: [],
            regionallist: [],
            editForm: {
                id:this.$route.params.id,
                owner_type_id:'',
                year:'',
                quantity:'',
                regional_id:''
            },
            rules: {
                owner_type_id: [
                    { required: true, message: '请选择类型', trigger: 'change' },
                ],
                regional_id: [
                    { required: true, message: '请选择活动区域', trigger: 'change' }
                ],
                year: [
                    { required: true, message: '请选择年份', trigger: 'change' }
                ],
                quantity: [
                    { required: true, message: '请填写数量'},
                    { validator: this.$utils.mustNumber,  message: '最少必须是1'}
                ]
            }
        }
    },
    mounted() {
        this.getRecord();
        this.getTypeList();
        this.getRegionalList();
        this.initYear();
    },
    methods:{
        update() {
            let _this = this;
            this.$http.httpPost({
                url:'/api/truck/quantityrecord/update',
                datas:this.editForm,
                success(res){
                    //成功回调
                    //res 为data字段数据
                    _this.dataList = res.data ? res.data : [];
                    _this.page = res.current_page;
                    _this.$utils.message('更新成功！');
                    _this.$router.replace({path:'/quantity'});
                }
                //当不需要处理错误时，就不要写fail的回调，否则将没有错误提示，fail是作为参数传递到http中的
            })
        },
        getRecord() {
            console.log();
            let _this = this;
            this.$http.httpPost({
                url:'/api/truck/quantityrecord/show',
                datas:{"id":_this.id},
                success(res){
                    //成功回调
                    //res 为data字段数据
                    _this.data = res ? res : [];
                    _this.editForm.owner_type_id = _this.data.owner_type_id;
                    _this.editForm.regional_id = _this.data.regional_id;
                    _this.editForm.year = _this.data.year;
                    _this.editForm.quantity = _this.data.quantity;
                },
                //当不需要处理错误时，就不要写fail的回调，否则将没有错误提示，fail是作为参数传递到http中的
            })
        },
        getTypeList() {
            let _this = this;
            this.$http.httpPost({
                url:'/api/truck/ownertype',
                datas:{},
                success(res){
                    //成功回调
                    //res 为data字段数据
                    _this.typelist = res.data ? res.data : [];
                },
                //当不需要处理错误时，就不要写fail的回调，fail是作为参数传递到http中的
            })
        },
        getRegionalList() {
            let _this = this;
            this.$http.httpPost({
                url:'/api/regional',
                datas:{},
                success(res){
                    //成功回调
                    //res 为data字段数据
                    _this.regionallist = res.data ? res.data : [];
                },
                //当不需要处理错误时，就不要写fail的回调，否则将没有错误提示，fail是作为参数传递到http中的
            })
        },
        initYear () {
            let _this = this;
            let myDate = new Date()
            let startYear = myDate.getFullYear() - 10// 起始年份
            let endYear = myDate.getFullYear()// 结束年份

            for (let i = startYear; i <= endYear; i++) {
                _this.yearlist.push({value: (i), label: (i)})
            }
        },
        submitForm(formName) {
            //存在回调的方法，因为回调外和回调内的作用域不一致，所以务必为 _this 复制 this，否则在回调中无法访问this对象
            let _this = this;
            //通过传递form表单ref名称，来调用表单的validate方法
            this.$refs[formName].validate((valid) => {
                //为true时验证通过
                if (valid) {
                    _this.update();
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        resetForm(formName) {
            this.$utils.message('清空');
            this.$refs[formName].resetFields();
        }
    }
}
</script>
